<template>
    <div class="target_hospital">
        <div class="search">
            <div class="left">
                <!-- 医院名称 -->
                <div class="search_list">
                    <span class="search_text">医院名称：</span>
                    <el-input size="small" placeholder="输入" v-model="hospital_name"></el-input>
                </div>
            </div>
            <div class="center"></div>
            <div class="right"></div>
        </div>
        <!--列表-->
        <div class="list blockMould target_list">
            <div class="list_head_button">
                <div class="search_name">
                    <el-button size="mini" type="primary" @click="search_list">查询</el-button>
                    <el-button size="mini" @click="reset_list">重置</el-button>
                </div>
                <!-- <div class="search_button">
                    <el-button size="mini" type="warning" plain >添加医院模板</el-button>
                    <el-button size="mini" type="warning" plain >删除医院模板</el-button>
                </div> -->
            </div>
            <el-table
                :header-cell-style="{background:'#F6F7FB',color:'#666666',height: '50px'}"
                :row-class-name="tableRowClassName"
                :data="targetHospitalList">
                <el-table-column
                    prop="id"
                    label="医院VRID"
                    min-width="70">
                </el-table-column>
                <el-table-column
                    prop="hospitalName"
                    label="医院名称"
                    min-width="95">
                </el-table-column>
                <el-table-column
                    prop="customerHospitalCode"
                    label="客户医院code"
                    min-width="95">
                </el-table-column>
                <el-table-column
                    prop="customerHospitalName"
                    label="客户医院名称"
                    min-width="108">
                </el-table-column>
                <el-table-column
                    prop="province"
                    label="省份"
                    min-width="74">
                </el-table-column>
                <el-table-column
                    prop="city"
                    label="城市"
                    min-width="70">
                </el-table-column>
                <el-table-column
                    prop="levelGradeCode"
                    label="医院等级">
                </el-table-column>
            </el-table>
            <!--分页-->
            <pagination :page="page" @changeCurrentPage="handleCurrentChange" @changePageSize="handlePageSize"/>
        </div>
    </div>
</template>

<script>
    import { api, baseAjax } from '@/api/api';
    import pagination from '../public/pagination';
    import { statusCode } from '../../utils/index';
    export default {
        name: "targetHospitalManagement",
        data() {
            return {
                //分页
                page: {
                    currentPage: 1,    //当前页
                    pageSize: 10,    //每页显示条数
                    totalPage: 0,   //总页数
                    total:null    //总条数
                },
                hospital_name:'',  //医院名称筛选
                targetHospitalList:[],   //列表数据
            }
        },
        components:{
            pagination
        },
        mounted(){
            this.get_target_hospital_list();//列表数据
        },
        methods: {
            //修改列表tr颜色
            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 2 === 1) {
                return 'success_row';
                }
                return '';
            },
            //改变当前页码
            handleCurrentChange(currentPage) {
                this.page.currentPage = currentPage;
                this.get_target_hospital_list();
            },
            //改变每页条数
            handlePageSize(pageSize){
                this.page.pageSize = pageSize;
                this.get_target_hospital_list();
            },
            //列表数据
            get_target_hospital_list(){
                let that = this;
                let data = {
                    currentPage:this.page.currentPage,
                    hospitalName:this.hospital_name,
                    pageSize:this.page.pageSize,
                    productId:this.$route.query.project_id,
                    totalPage:this.page.totalPage
                };
                baseAjax(api.target_hospital_list, data, (res)=>{
                    if(res.code === statusCode.success){
                        let {pageSize, totalPage, value, count} = res.data;
                        that.page.pageSize = pageSize;
                        that.page.totalPage = totalPage;
                        that.page.total = count;
                        that.targetHospitalList = value;
                    }
                });
            },
            //查询
            search_list(){
                this.handleCurrentChange(1);
            },
            //重置
            reset_list(){
                this.hospital_name = '';
            }
        }
    }
</script>

<style lang="less" scoped>
.target_hospital{
    font-family: PingFangSC-Regular, PingFang SC;
    .search {
        .search_list{
            .el-input{
                max-width:68%;
            }
        }    
    }
    .target_list{
        .list_head_button{
            justify-content:flex-end;
        }
    }
    

    i {
      font-size: 20px;
    }
}
</style>
